(function($){
    var defaults = {
        cycle:["时间","日","周","月"],
        color:"bule",
        setVal:1,
        chooseCount:function(element,index){},
}
    var opts={ };
    var cycleL;
    $.fn.creatSlider = function(options){
        //参数
        opts= $.extend({},defaults,options);
        //周期数组
        var arrcycle=opts.cycle;
        //周期长度
        cycleL=opts.cycle.length;
        var html="";
        var lineLeft;
        //为每个文本设置的宽度
        var setwidth=parseInt(100/cycleL)+"%";

        for(var i = 0;i < arrcycle.length;i++ ){
            html+="<td class='fontWidth' width="+ setwidth +"><span>"+ opts.cycle[i] +"</span></td>"
        }
        var line="<tr class='lineTr'><td colspan="+ cycleL +"><div class='lineWrap'><div class='lineSlider'></div></div></td></tr>"
        var creatTable="<table style=' width:"+ opts.setWidth +"' class='table text-center'>"+ line +"<tr>"+ html +"</tr></table>"
        this.append(creatTable);

        //赋予点击事件
        var _this = $(this);
        autoTarget(opts.setVal)
        setTimeout(function(){
            _this.find(".fontWidth:nth-child("+ ( opts.setVal + 1 ) + ") span").css("color",opts.color)
        },300)
        function autoTarget(index){
            lineLeft= ( index + 1 ) * $(".fontWidth").width()-( $(".fontWidth").width() / 2 ) - 8;
            for(var i = 0; i < cycleL; i++){
                if(index ==i){
                    $(".lineSlider").animate({left:lineLeft})
                }
            }
        }
       return this.each(function(){
            _this.find(".fontWidth span ").bind("click",function(){
                $(this).css({color:opts.color}).parent().siblings().children().css({color:"black"});
                var index = $(this).parent().index();
                autoTarget(index)
                opts.chooseCount($(this),index);
            })
        })
    }
    $.fn.creatSlider.reSetOpts = function(){
        return opts;
    }
})(jQuery);





